<template>
  <div class="about">
    <h1>This is an about page</h1>
    <n-space justify="center">
      <n-button @click="handleDialogFolder">点击事件</n-button>
      <n-button class="dragBtn">点击可拖拽页面</n-button>
      <n-tooltip placement="bottom" trigger="hover">
        <template #trigger>
          <n-button v-move-drag="handleMove">点击可拖拽页面</n-button>
        </template>
        <span> 点击可拖拽页面 </span>
      </n-tooltip>
    </n-space>
  </div>
</template>
<script setup>
import { ipcRenderer } from "electron";
import { onMounted } from "vue";
import { dialog } from "@electron/remote";
import path from 'path'

onMounted(() => {
  console.log('path', path.resolve('root', 'resource'));

  // 给主进程发送消息
  ipcRenderer.send("ipc-send", "hello: ipcMain");
    // 监听主进程的回复
  ipcRenderer.on('ipc-reply', (e, args) => {
    console.log(args);
  })
});
const handleDialogFolder = (e) => {
  dialog
    .showOpenDialog({
      properties: ["openFile", "multiSelections", "createDirectory"],
    })
    .then((res) => {
      console.log(res);
    });
};
const handleUpdateShow = (e) => {
  console.log(e);
}

const handleMove = (pos) => {
  ipcRenderer.send('app-move', pos)
}

</script>

<style scoped>
.dragBtn {
  -webkit-user-select: none;
  /* -webkit-app-region: no-drag; */
  -webkit-app-region: drag;
}
</style>
